<template>
	<view>
		<!-- 客服信息 -->
		<fu-popup mode="center" v-model="servicePopUp">
			<view class="flex flex-direction align-center">
				<view class="service-box">
					<view class="service-head">
						<view></view>
						<view>联系客服</view>
						<image src="../../static/quit.png" mode="" class="quitStyle" @click="servicePopUp = false"></image>
					</view>
					<view class="service-content">
						<view class="service-item">
							<view>客服微信：{{serviceData.wechat_id || ''}}</view>
							<view class="copyBtn" @click="copyData(serviceData.wechat_id)">复制</view>
						</view>
						<view class="service-item">
							<view>客服电话：{{serviceData.wechat_phone1 || ''}}</view>
							<view class="copyBtn" @click="copyData(serviceData.wechat_phone1)">复制</view>
						</view>
						<view class="service-item" v-if="serviceData.wechat_phone2">
							<view>客服电话：{{serviceData.wechat_phone2}}</view>
							<view class="copyBtn" @click="copyData(serviceData.wechat_phone2)">复制</view>
						</view>
						<view style="text-align: center;">
							<view>{{serviceData.time || ''}}</view>
							<image :src="serviceData.wechat_img" mode="" class="codeImgStyle"></image>
						</view>
					</view>
					
				</view>
			</view>
		</fu-popup>
	</view>
</template>

<script>
	export default {
		name:"serviceModule",
		props:{
			servicePopUp:{
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				
			};
		},
		onLoad() {
			this.getBase()
		},
		methods:{
			serviceShow(){
				this.servicePopUp = true
			},
			getBase() {
				this.$api.post(global.apiUrls.getBase).then(res => {
					console.log('客服信息',res);
					if (res.data.code == 1) {
						this.serviceData = res.data.data
					}
				})
			},
			/**
			 * @function
			 * @description 点击复制
			 */
			copyData(data) {
			  uni.setClipboardData({
			    data: data,
			    success: () => {
			      // 隐藏自带轻提示
			      uni.hideToast()
			      uni.showToast({
			        icon: 'none',
			        title: this.i18n['复制成功']
			      });
			    }
			  });
			},
		}
	}
</script>

<style lang="scss">
.service-box{
		width: 600rpx;
		height: 800rpx;
		padding: 32rpx;
		border-radius: 38rpx;
		background: linear-gradient(#fef0ed,#ffffff);
		.service-head{
			color: #333;
			font-size: 32rpx;
			font-weight: 600;
			padding-bottom: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #eee;
		}
		.quitStyle{
			width: 35rpx;
			height: 35rpx;
		}
		.service-content{
			padding: 24rpx 0;
			font-size: 28rpx;
			.service-item{
				display: flex;
				justify-content: space-between;
				padding: 12rpx 24rpx;
			}
		}
		.copyBtn{
			color: #ef8768;
			padding: 0 12rpx;
			border-radius: 8rpx;
			border: 1rpx solid #ef8768;
		}
		.codeImgStyle{
			width: 360rpx;
			height: 360rpx;
		}
	}
</style>